<template>
  <div class="container">
    <div class="navbar">
      <h2>{{ game.name }}使用CDK</h2>
    </div>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="uid">{{ game.uidTip }}</label>
        <input type="text" id="uid" v-model="formData.uid" :placeholder="game && game.uidTip ? '请输入' + game.uidTip : ''">
      </div>

      <div class="form-group">
        <label for="cdk">CDK</label>
        <input type="text" id="cdk" placeholder="请输入CDK" v-model="formData.cdk">
      </div>

      <div class="form-group">
        <button type="submit">激活</button>
      </div>
    </form>

    <!-- 提示框 -->
    <div class="alert-box" v-if="game.cdkTips">
      <span v-html="game.cdkTips"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CdkPage'
}
</script>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const game = ref({})
const formData = ref({
  gameId: '',
  uid: '',
  cdk: ''
})
const lastRequestTime = ref(0)
const interval = 3000 // 设置请求间隔为 3 秒

// 从 URL 中获取 gameId
const getGameIdFromUrl = () => {
  return route.query.gameId
}

// 获取游戏信息
const getGame = async () => {
  try {
    const response = await fetch('/api/game/getGameById', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        gameId: formData.value.gameId
      })
    })
    game.value = await response.json()
  } catch (error) {
    console.error('获取游戏数据失败:', error)
    alert('获取游戏数据失败')
  }
}

// 校验表单
const checkForm = () => {
  if (!formData.value.uid.trim()) {
    alert('请输入' + game.value.uidTip)
    return false
  }

  if (!formData.value.cdk) {
    alert('请输入CDK')
    return false
  }

  const currentTime = new Date().getTime()
  if (currentTime - lastRequestTime.value < interval) {
    alert('点太快了~')
    return false
  }
  lastRequestTime.value = currentTime

  return true
}

// 提交表单
const submitForm = async () => {
  if (!checkForm()) return
  
  try {
    const response = await fetch('/api/cdk/use', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData.value)
    })
    const data = await response.text()
    alert(data)
    if (data.includes('成功')) {
      router.replace({
        path: '/backend',
        query: { gameId: formData.value.gameId }
      })
    }
  } catch (error) {
    alert('获取游戏数据失败！' + error)
  }
}

onMounted(() => {
  const gameId = getGameIdFromUrl()
  if (gameId) {
    formData.value.gameId = gameId
    getGame()
  }
})
</script>

<style scoped>
.container {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 120px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.navbar h2 {
  font-size: 25px;
  margin: 0;
  color: #333;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-group label {
  margin-bottom: 5px;
  color: #666;
  font-size: 14px;
}

.form-group input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #409EFF;
}

.form-group button {
  padding: 12px 20px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.form-group button:hover {
  background-color: #66b1ff;
}

.alert-box {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
  color: #f56c6c;
  font-size: 14px;
  border-radius: 8px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .container {
    margin: 10px;
    padding: 15px;
  }

  .navbar h2 {
    font-size: 20px;
  }

  .form-group input,
  .form-group button {
    font-size: 14px;
  }
}
</style> 